<template>
  <!-- 相关性分析 -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import ecStat from "echarts-stat";
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt, toolboxFullScreen } from "@/utils/utils";
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = [];
        this.curChartConfig.colors.forEach((v) => {
          colors.push(v.color);
        });
        this.colors = [...colors, ...Ecolors.color];
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init();
      }
    },
    getSeriesData() {
      let seriesData = [];
      return seriesData;
    },
    init() {
      // See https://github.com/ecomfe/echarts-stat
      this.$echarts.registerTransform(ecStat.transform.clustering);
      // 相关度先排序
      let series = [
        100, 1, 98, 98, 97, 97, 96, 80, 70, 60, 50, 40, 30, 20, 10, 5, 1,
      ];
      // 反转数组，用于生成坐标
      let reverseS = [...series].reverse();
      // 中心点默认0,0
      let arrList = [[0, 0]];
      // x + -   y + -  四个象限
      const points = [
        {
          x: "+",
          y: "+",
        },
        {
          x: "-",
          y: "-",
        },
        {
          x: "-",
          y: "+",
        },
        {
          x: "+",
          y: "-",
        },
      ];
      // 生成坐标
      for (let i = 1; i < series.length; i++) {
        let remainder = i > 4 ? i % 4 : 4 - i;
        let point = points[remainder];
        let arr = [];
        let num = reverseS[i];
        // 防止相似度相同时点重合
        if (num - reverseS[i - 1] < 5) {
          num = reverseS[i] + Math.floor(Math.random() * 30);
        }
        arr[0] = point.x == "+" ? num : -num;
        arr[1] = point.y == "+" ? num : -num;
        arr[0] = arr[0] + Math.floor(Math.random()*20)
        arr[1] = arr[1] + Math.floor(Math.random()*20)
        arrList.push(arr);
      }
      let CLUSTER_COUNT = 6;
      let DIENSIION_CLUSTER_INDEX = 2;
      let COLOR_ALL = [
        "#37A2DA",
        "#e06343",
        "#37a354",
        "#b55dba",
        "#b5bd48",
        "#8378EA",
        "#96BFFF",
      ];
      let pieces = [];
      for (let i = 0; i < CLUSTER_COUNT; i++) {
        pieces.push({
          value: i,
          label: "cluster " + i,
          color: COLOR_ALL[i],
        });
      }
      let option = {
        dataset: [
          {
            // source: data,
            source: arrList,
          },
          {
            transform: {
              type: "ecStat:clustering",
              // print: true,
              config: {
                clusterCount: CLUSTER_COUNT,
                outputType: "single",
                outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX,
              },
            },
          },
        ],
        tooltip: {
          position: "top",
          formatter: (params) => {
            return `相关度：${series[params.dataIndex]}`;
          },
        },
        visualMap: {
          type: "piecewise",
          show: false,
          // top: "middle",
          // min: 0,
          // max: CLUSTER_COUNT,
          // left: 10,
          // splitNumber: CLUSTER_COUNT,
          // dimension: DIENSIION_CLUSTER_INDEX,
          pieces: pieces,
        },
        grid: {
          left: 20,
          right: 20,
          top: 20,
          bottom: 20,
        },
        xAxis: {
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            show: false,
          },
        },
        series: {
          type: "scatter",
          // encode: { tooltip: [0, 1] },
          symbolSize: (value, params) => {
            let num = series[params.dataIndex];
            return num > 10 ? num : 10;
          },
          itemStyle: {
            normal: {
              label: {
                color: "#333",
                show: true,
                position: "inside",
                formatter: function (params, ticket, callback) {
                  var s = params.dataIndex;
                  return s;
                },
              },
            },
          },
          // itemStyle: {
          //   borderColor: "#555",
          // },
          datasetIndex: 1,
        },
      };
      this.chart.clear()
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      // this.chart.on("finished", () => {
      //   let tempId = this.$route.query.tempId;
      //   if (tempId) {
      //     this.getEchartImg(this.chart.getDataURL());
      //   }
      // });
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function () {
        this.getCurChartConfig();
      },
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear();
      } else {
        this.getCurChartConfig();
      }
    },
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId));
    this.getCurChartConfig();
  },
  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>